{extend name='admin@public/content'}
<style>
    .keys-container{min-width:800px}
    .keys-container textarea{width:95%;height:100px;border-radius:0}
    .keys-container .input-group input{border-right:0}
    .keys-container .input-group-addon{border-left:0;border-radius:0}
    .keys-container [data-tips-image]{width:112px;height:auto;}
    .keys-container .layui-elem-field{width:100%;height:1000px;position:absolute}
</style>
{/block}
{block name="content"}
<!-- 效果预览区域 结束 -->
<div class="row keys-container">
    <div class='col-xs-6 margin-left-15'>
        <div id="allmap"></div>
        <form id="uploadForm" class="form-horizontal layui-form" role="form" data-auto="true" action="/admin/Adminbanner/addbanner" method="post">
            <fieldset style="width:120%;height:800px" class="layui-elem-field layui-box">
                <legend>{$title}</legend>
                <div class="form-group">
                    <label class="col-xs-2 control-label layui-form-label ">名称 </label>
                    <div class="col-xs-8">
                        <input required title='请输入名称' maxlength='20' name='name' class="layui-input" value='' >
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-xs-2 control-label layui-form-label ">广告图片</label>
                        <div  style="min-height:1px;">
                            <div class="container">
                                <div class="row">
                                    <div class="layui-upload-list col-xs-8">
                                        <div style="min-height:1px;line-height:160px;text-align:center;position:relative;" ontouchstart="">
                                            <div class="cover-wrap" style="display:none;position:fixed;left:0;top:0;width:100%;height:100%;background: rgba(0, 0, 0, 0.4);z-index: 10000000;text-align:center;">
                                                <div class="" style="width:900px;height:600px;margin:100px auto;background-color:#FFFFFF;overflow: hidden;border-radius:4px;">
                                                    <div id="clipArea" style="margin:10px;height: 520px;"></div>
                                                    <div class="" style="height:56px;line-height:36px;text-align: center;padding-top:8px;">
                                                        <input id="clipBtn" style="width:120px;height: 36px;border-radius: 4px;background-color:#ff8a00;color: #FFFFFF;font-size: 14px;text-align: center;line-height: 36px;outline: none;" value="保存封面">
                                                    </div>
                                                </div>
                                            </div>
                                            <input id="view"  style="width:750px;height:200px;" title="请上传 750*200 的封面图片">
                                            <div style="height:10px;"></div>
                                            <div class="" style="width:140px;height:32px;border-radius: 4px;background-color:#ff8a00;color: #FFFFFF;font-size: 14px;text-align:center;line-height:32px;outline:none;margin-left:37px;position:relative;">
                                                点击上传封面图
                                                <input type="file" id="file" style="cursor:pointer;opacity:0;filter:alpha(opacity=0);width:100%;height:100%;position:absolute;top:0;left:0;">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <input type="hidden" name="img" id="img" value="">
                </div>

                <div class="form-group">
                    <label class="col-xs-2 control-label layui-form-label ">图片连接</label>
                    <div class="col-xs-8">
                        <input title='请输入图片连接' maxlength='30' name='imgHref' class="layui-input" value=''>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-2 control-label layui-form-label ">排 序</label>
                    <div class="col-xs-8">
                        <input required type="text" title='请输入排序' maxlength='3' name='sort' class="layui-input" value=''>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-xs-2 control-label layui-form-label ">广告位置</label>
                    <div class="col-xs-8">
                        <input required title='请输入联系方式' maxlength='11' name='tel' class="layui-input" value=''>
                    </div>
                </div>

                <div class="layui-form" >
                    <div class="layui-form-item">
                        <label class="col-xs-2 layui-form-label">广告开始时间</label>
                        <div class="col-xs-8">
                            <input type="text" class="layui-input test-laydate-item" value="" autocomplete="off" name="starttime" placeholder="yyyy-MM-dd">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="col-xs-2 layui-form-label">广告结束时间</label>
                        <div class="col-xs-8">
                            <input type="text" class="layui-input test-laydate-item" value="" autocomplete="off" name="endtime" placeholder="yyyy-MM-dd">
                        </div>
                    </div>
                </div>
                <div class="text-center padding-bottom-10" style="position:absolute;bottom:0;width:100%;">
                    <div class="hr-line-dashed" style="margin:10px 0"></div>
                    <button style="" class="layui-btn menu-submit">保存数据</button>
                    <!--{if !isset($vo.keys) || !in_array($vo.keys,['default','subscribe'])}-->
                    <button data-cancel-edit class="layui-btn layui-btn-danger" type='button'>取消编辑</button>
                    <!--{/if}-->
                </div>
                {if isset($vo['id'])}<input type='hidden' value='{$vo.id}' name='id'>{/if}
            </fieldset>
        </form>
    </div>
</div>
{/block}

{block name="script"}
<script>

    //图片裁剪上传
    var clipArea = new bjj.PhotoClip("#clipArea", {
        size: [750, 200],// 截取框的宽和高组成的数组。默认值为[260,260]
        outputSize: [750, 200], // 输出图像的宽和高组成的数组。默认值为[0,0]，表示输出图像原始大小
        //outputType: "jpg", // 指定输出图片的类型，可选 "jpg" 和 "png" 两种种类型，默认为 "jpg"
        file: "#file", // 上传图片的<input type="file">控件的选择器或者DOM对象
        view: "#view", // 显示截取后图像的容器的选择器或者DOM对象
        ok: "#clipBtn", // 确认截图按钮的选择器或者DOM对象
        loadStart: function() {
            // 开始加载的回调函数。this指向 fileReader 对象，并将正在加载的 file 对象作为参数传入
            $('.cover-wrap').fadeIn();
            console.log("照片读取中");
        },
        loadComplete: function() {
            // 加载完成的回调函数。this指向图片对象，并将图片地址作为参数传入
            console.log("照片读取完成");
        },
        //loadError: function(event) {}, // 加载失败的回调函数。this指向 fileReader 对象，并将错误事件的 event 对象作为参数传入
        clipFinish: function(dataURL) {
            // 裁剪完成的回调函数。this指向图片对象，会将裁剪出的图像数据DataURL作为参数传入
            $('.cover-wrap').fadeOut();
            $('#view').css('background-size','100% 100%');
            //图片上传 base64
            $.ajax({
                url: '/admin/adminoss/index',
                type: 'POST',
                data: dataURL,                    // 上传formdata封装的数据
                dataType: 'JSON',
                processData: false, //告诉jquery不要发送数据
                contentType: false, //不要射中content-type
                success:function (data) {           //成功回调
                    if(data.id !=''){
                        $('#img').val(data.id);
                        layer.msg('上传成功');
                    }else{
                        layer.msg('上传失败，请联系管理员');
                    }
                }
            });
        }
    });

    //同时绑定多个
    lay('.test-laydate-item').each(function(){
        laydate.render({
            elem: this
            ,trigger: 'click'
        });
    });
    $(function (){
        var $body = $('body');
        /*! 取消编辑 */
        $('[data-cancel-edit]').on('click', function (){
            var dialogIndex = $.msg.confirm('确定取消编辑吗？', function (){
                history.back();
                $.msg.close(dialogIndex);
            });
        });
        // 默认事件触发
        $('input[name=type]:checked').map(function (){
            $(this).trigger('click');
        });
    });
</script>
{/block}
